<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>互助平台</title>

    <link rel="stylesheet" href="assets/css/style-starter.css">

    <link rel="stylesheet" href="assets/css/add.css">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="assets/plugins/elementui/index.css">
    <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">

</head>

<body>
<!--w3l-header-->
<div id="app">
    <header class="w3l-header-nav">
        <!--/nav-->
        <nav class="navbar navbar-expand-lg navbar-light fill px-lg-0 py-0 px-3">
            <div class="container">
                <a class="navbar-brand" href="index.html">校园 <span>互助</span></a>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item @@home__active">
                            <a class="nav-link" href="index.html">首页</a>
                        </li>
                        <li class="nav-item @@about__active">
                            <a class="nav-link title_font_color" href="mutualhelp.html">互助</a>
                        </li>
                        <li class="nav-item @@services__active">
                            <a class="nav-link" href="secondhand.html">二手交易</a>
                        </li>
                        <li>
                            <el-dropdown>
                                  <span class="el-dropdown-link">
                                    订单中心<i class="el-icon-arrow-down el-icon--right"></i>
                                  </span>
                                <el-dropdown-menu slot="dropdown">
                                    <a href="SendOrder.html">
                                        <el-dropdown-item>代送订单</el-dropdown-item>
                                    </a>
                                    <a href="demanOrder.html">
                                        <el-dropdown-item>需求订单</el-dropdown-item>
                                    </a>
                                    <a href="">
                                        <el-dropdown-item>二手订单</el-dropdown-item>
                                    </a>
                                    <!-- <el-dropdown-item divided>蚵仔煎</el-dropdown-item> -->
                                </el-dropdown-menu>
                            </el-dropdown>
                        </li>
                        <li class="nav-item @@contact__active">
                            <a class="nav-link" href="contact.html">留言</a>
                        </li>

                    </ul>

                    <div class="box-support"><!--<a class="fa fa-headphones" href="index.html" @click="exit()">-->
                        <p>{{cookie}}欢迎
                            <a href="index.html" @click="exit()"><i class="el-icon-circle-close"></i>退出</a></p>
                    </div>

                </div>
            </div>
        </nav>
        <!--//nav-->
    </header>
    <!-- //w3l-header -->
    <section class="w3l-about-breadcrumb">
        <div class="breadcrumb-bg breadcrumb-bg-about py-5">
            <div class="container py-lg-5 py-md-3">
                <h2 class="title">互助</h2>
            </div>
        </div>
    </section>
    <section class="w3l-breadcrumb">
        <div class="container">
            <ul class="breadcrumbs-custom-path">
                <li><a href="index.html">首页</a></li>
                <li class="active"><span class="fa fa-arrow-right mx-2" aria-hidden="true"></span>互助</li>
            </ul>
        </div>
    </section>
    <!-- features-4 -->
    <section class="w3l-services-6-main">
        <div class="services-6 py-5">
            <div class="container py-md-3">


                <!-- 按钮设计 -->
                <h1 class="title">添加商品</h1>


                <div style="width: 50%;margin: auto;">
                    <el-form label-position="top" label-width="80px" :model="formData" ref="formData"
                             class="el-form-item"
                             :rules="rules">
                        <el-form-item label="商品名称" prop="name">
                            <el-input v-model="formData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="收货地址" prop="address">
                            <el-input v-model="formData.address"></el-input>
                        </el-form-item>
                        <el-form-item label="商品描述" prop="shopDesc">
                            <el-input v-model="formData.shopDesc"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格" prop="price">
                            <el-input v-model="formData.price" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
                        </el-form-item>
                    </el-form>
                </div>


                <div class="picture">
                    <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="http://localhost:8081/uploader"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="handleAvatarSuccess"
                            :file-list="fileList"
                            :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <!--                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </div>


                <div style="text-align: center;">
                    <el-button type="primary" @click="addButton('formData')" plain>添加商品</el-button>
                </div>

            </div>
        </div>
    </section>


    <section class="w3l-footer-29-main w3l-copyright">
        <div class="container">
            <div class="bottom-copies">
                <p class="copy-footer-29 text-center">Copyright &copy; 2021.Company name All rights reserved.<a
                        target="_blank" href="https://www.11moban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
            </div>
        </div>

        <!-- move top -->
        <button onclick="topFunction()" id="movetop" title="Go to top">
            &#10548;
        </button>
    </section>
</div>
<script>
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function () {
        scrollFunction()
    };

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("movetop").style.display = "block";
        } else {
            document.getElementById("movetop").style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>
<!-- /move top -->
</section>

<!-- jQuery and Bootstrap JS -->
<script src="assets/js/jquery-3.3.1.min.js"></script>

<!-- Template JavaScript -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>


<script src="assets/js/owl.carousel.js"></script>


<script src="assets/js/bootstrap.min.js"></script>

<script src="assets/js/vue.js"></script>

<script src="assets/plugins/elementui/index.js"></script>

<script src="assets/js/axios-0.18.0.js"></script>

<script>
    // Vue.config.productionTip = false;
    var vue = new Vue({
        el: '#app',
        data: {


            fileList: [],

            cookie: '',
            //表单数据
            formData: {
                name: '',
                address: '',
                shopDesc: '',
                price: '',
                pic: '',
                userId: '',
            },

            rules: {
                name: [
                    {required: true, message: '商品名称为必填项', trigger: 'blur'},
                    {min: 1, max: 50, message: '只能输入50位以内的商品名称', trigger: 'blur'}

                ],
                address: [
                    {required: true, message: '收货地址为必填项', trigger: 'blur'},
                    {min: 1, max: 50, message: '只能输入50位以内的收货地址', trigger: 'blur'}

                ],
                shopDesc: [
                    {required: true, message: '商品描述为必填项', trigger: 'blur'},
                    {min: 1, max: 50, message: '只能输入50位以内的商品描述', trigger: 'blur'}

                ],
                price: [
                    {required: true, message: '商品价格为必填项', trigger: 'blur'},
                    {min: 1, max: 16, message: '只能输入16位以内的商品价格', trigger: 'blur'}
                ],
            },


        },

        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.cookiename();
        },
        methods: {

            addButton(formData) {
                this.$refs[formData].validate((valid) => {
                    if (valid) {
                        this.submitUpload();

                    } else {
                        this.$message.error("表单提交错误")
                    }
                });

            },

//图片函数
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleAvatarSuccess(res, file) {
                //返回的数据
                this.formData.pic=res;
                axios.post("http://localhost:10010/shops",this.formData).then((res)=>{
                    if(res.data){
                        this.$message.success("添加成功");
                        window.location.href = "mutualhelp.html";
                    }else{
                        this.$message.error("添加失败，请联系管理员");
                    }
                })
            },
            cookiename() {
                axios.get("/users/cookie").then((res) => {
                    this.cookie = res.data.cookie;
                    this.formData.userId=res.data.id;
                })
            },
            exit() {
                axios.delete("/users/cookie").then((res) => {
                })
            },


        }

    })

</script>


</body>

</html>